<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>出库记录
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form  label-width="80px">
            <el-form-item label="品牌名称">
              <el-select
                v-model="channelName"
                placeholder="请选择"
                disabled
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-select
                disabled
                v-model="typeName"
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input
                disabled
                v-model="productName"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品型号">
              <el-input
                disabled
                v-model="productNo"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="序列号SN">
              <el-input
                v-model="getListData.productCode"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            @click="queryPayActiveLists"
            >搜索</el-button
          >
          <el-button type="" @click="reset"
            >重置</el-button
          >
          <!-- <el-button
            type="primary"
            style="margin-left: 40px"
            class="butt"
            @click="warehousing"
            >批量导出</el-button
          > -->
          <el-button
            v-if="totalNum > 0"
            style="margin-left: 10px"
            type="primary"
            @click="payActiveListExport"
            class="butt"
            >导出</el-button
          >
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            @selection-change="handleSelectionChange"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            v-loading="listLoading"
          >
            <el-table-column type="selection" min-width="30"></el-table-column>
            <el-table-column
              prop="productCode"
              min-width="150"
              show-overflow-tooltip
              label="序列号SN"
            ></el-table-column>
          </el-table>
        </div>

        <el-pagination
          background
          style="text-align: right; padding: 0 20px"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getListData.page"
          :page-size="getListData.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
    <!-- <Tree :showType="showType" @func="transmit" /> -->
  </div>
</template>
<script type="text/ecmascript-6">
import https from "../../plugins/https.js";
import axios from "axios";
import Tree from "../tree/index";
// 批量导出
import { exportFile } from "../../plugins/expord";
export default {
  data() {
    return {
      channelName: "",
      typeName:"",
      productName:"",
      productNo:"",
      productName: "",
      tableData:"",
      productNo: "",
      formInline: {
        productType: "",
        oemUid: localStorage.getItem("uid"), //OEMid
        idList: [],
        status: "",
        startDate: "",
        endDate: "",
        upCntCtl: "",
        page: 1,
        number: 20,
        productName: "",
        channelUid: "",
        productUid: "",
        productCode: "",
        // oemUid: localStorage.getItem('uid'),
        officeUid: "", //机构ID
        organizationName: "", //机构名
      },
      getListData: {
        page: 1,
        number: 20,
        id: "",
        productCode: "", //搜索的序列号
      },
    };
  },
  components: {
    Tree,
  },
  created() {
      this.channelName= this.$route.query.channelName
      this.typeName= this.$route.query.typeName
      this.productName= this.$route.query.productName
      this.productNo= this.$route.query.productNo
      console.log('asdf')
      console.log(this.channelName)
    this.getList();
  },
  mounted() {},
  methods: {
    //   重置
    reset(){
        this.getListData.productCode=""
        this.getList()
    },
    // 搜索按钮
    queryPayActiveLists() {
      this.getList();
    },
    //   获取列表数据
    getList() {
      this.getListData.id = this.$route.query.id;
      axios
        .post("api/mall/storeRecordListDataDetail", this.getListData)
        .then((res) => {
          console.log("获取出来的数据");
          console.log(res);
          this.tableData=res.data.data
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 分页变化
    handleCurrentChange(val) {
      console.log(val);
    },
    // 每页多少条
    handleSizeChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.saleList {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
/deep/ .numVal {
  width: 200px;
}
/deep/ .numVal .el-input__inner {
  width: 100%;
}
.configCss {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
.saleTitle {
  width: 100px;
  margin-right: 10px;
  text-align: right;
}
.con {
  position: relative;
}
.el-main {
  padding: 0 !important;
}
.elP {
  width: 100%;
  margin: 20px 0;
  font-size: 15px;
  font-weight: 500;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  min-height: 30px;
  display: block;
  float: left;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #409eff;
  border-color: #409eff;
}
.btn {
  float: right;
}

.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.text {
  color: #999;
}
.search {
  float: right !important;
  margin-top: 0px !important;
}
.table {
  margin-top: 20px;
}

.top {
  padding-bottom: 20px;
}
/deep/ .el-dialog {
  padding-bottom: 20px;
}
/deep/ .el-cascader {
  line-height: 32px;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
/deep/ .count > .el-input__inner {
  width: 246px;
}
/deep/ .selectYN {
  width: 100px;
}
/deep/ .selectYN .el-input {
  width: 100%;
}
/deep/ .selectYN .el-input__inner {
  width: 100%;
}
/deep/ .handHover {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.popoverTitle {
  font-size: 16px;
  margin-bottom: 7px;
  margin-top: 7px;
  font-family: "Microsoft YaHei";
}
/* /deep/ .el-icon-question:hover {
  display: none !important;
} */
/* .tooltip-content .div {
    line-height: 18px;

} */
</style>
